<script lang="ts" setup>
import {
  Histogram,
  Calendar,
  Sunny,
  Moon,
  Star,
  Picture,
  Male,
  Female,
} from "@element-plus/icons-vue";
const router = useRouter();
const rankType = ref([
  {
    id: 1,
    icon: shallowRef(Sunny),
    title: "日榜",
  },
  {
    id: 2,
    icon: shallowRef(Calendar),
    title: "周榜",
  },
  {
    id: 3,
    icon: shallowRef(Moon),
    title: "月榜",
  },
  {
    id: 4,
    icon: shallowRef(Histogram),
    title: "总榜",
  },
  {
    id: 5,
    icon: shallowRef(Star),
    title: "新人榜",
  },
  {
    id: 6,
    icon: shallowRef(Picture),
    title: "原创榜",
  },
  {
    id: 7,
    icon: shallowRef(Male),
    title: "男榜",
  },
  {
    id: 8,
    icon: shallowRef(Female),
    title: "女榜",
  },
]);
const value = ref("2021-10-29");
const holidays = [
  "2021-10-01",
  "2021-10-02",
  "2021-10-03",
  "2021-10-04",
  "2021-10-05",
  "2021-10-06",
  "2021-10-07",
];
const isHoliday = ({ dayjs }: any) => {
  return holidays.includes(dayjs.format("YYYY-MM-DD"));
};
const radio = ref("");
const onChange = () => {
  router.replace({
    path: "/category/" + radio.value,
  });
};
</script>
<template>
  <div class="rank-form">
    <div class="field md:hidden lg:flex sm:hidden hidden justify-center">
      <el-radio-group
        v-model="radio"
        size="large"
        class="field-item"
        @change="onChange"
      >
        <el-radio-button
          :label="item.title"
          :value="item.title"
          :style="{ 'background-color': 'greenyellow' }"
          v-for="item in rankType"
          :key="item.id"
        >
          <el-icon :size="16">
            <component :is="item.icon" />
          </el-icon>
          <span>{{ item.title }}</span>
        </el-radio-button>
      </el-radio-group>
      <div class="field-item">
        <el-date-picker
          v-model="value"
          type="date"
          placeholder="Pick a day"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"
        >
          <template #default="cell">
            <div class="cell" :class="{ current: cell.isCurrent }">
              <span class="text">{{ cell.text }}</span>
              <span v-if="isHoliday(cell)" class="holiday" />
            </div>
          </template>
        </el-date-picker>
      </div>
      <div class="field-item type">
        <el-dropdown>
          <span class="el-dropdown-link">
            所有类型
            <el-icon class="el-icon--right">
              <i-ep-ArrowDownBold />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>Action 1</el-dropdown-item>
              <el-dropdown-item>Action 2</el-dropdown-item>
              <el-dropdown-item>Action 3</el-dropdown-item>
              <el-dropdown-item disabled>Action 4</el-dropdown-item>
              <el-dropdown-item divided>Action 5</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.rank-form {
  width: 100%;
  height: auto;
}
.field {
  // display: flex;
  justify-content: space-around;
  flex-direction: row;
}
.field .type {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center;
}
</style>
